<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src = "jquery-1.11.2.js"></script>
	<link rel = "stylesheet" href = "stylesheets/style.css" type = "text/css">
	<script src = "style.js"></script>
</head>
<body>
	<div id = "header">
		<img src="img/logo-home.png" alt="logo" class = "logo">
		<ul class = "nav-head">
			<li class = "nav-cont"><a href="#" target = "_blank" class = "first">首页</a></li>
			<li class = "nav-cont"><a href="#" target = "_blank">健康计划</a></li>
			<li class = "nav-cont"><a href="#" target = "_blank">健康管理</a></li>
			<li class = "nav-cont"><a href="#" target = "_blank">家人关怀</a></li>
			<li class = "nav-cont"><a href="#" target = "_blank">健康档案</a></li>
		</ul>
		<div class = "h-right">
			<div class = "user">
				<div class = "user-cont">
					<img src="img/default.png" alt="user-logo" class = "user-logo">
					<p class = "user-name">weijianxing <span class = "user-border"></span></p>
				</div>
				<input type="hidden" id = "user-hide" value = "0">
				<ul class = "user-menu">
					<li class = "user-menu-cont"><a href="#" target = "_blank">账号设置</a></li>
					<li class = "user-menu-cont"><a href="#" target = "_blank">个人信息</a></li>
					<li class = "user-menu-cont"><a href="#" target = "_blank">我的设备</a></li>
					<li class = "user-menu-cont"><a href="#" target = "_blank">退出</a></li>
				</ul>
			</div>
			<p class = "email">
				<img src="img/message.png" alt="email">
				<span></span>
			</p>
		</div>
	</div>
	<div id = "content" class = "clearfix">
		<div id = "cont-left">
			<h3>我加入爱健康以来</h3>
			<div class = "cl-top">
				<div class = "box-one">
					<p style = "margin-top:10px;">共燃烧</p>
					<p style = "margin-top:20px;"><span>1215</span>卡</p>
				</div>
				<div class = "box-two"></div>
				<div class = "box-three">
					<p style = "margin-top:10px;">已运动</p>
					<p style = "margin-top:20px;">12天</p>
				</div>
				<div class = "box-four">
					<div class = "ball1">
						<div class = "ball2">
							<p class = "ball2-pa">已运动</p>
							<p class = "ball2-p">22天</p>
						</div>
					</div>
				</div>
				<div class = "box-five"></div>
			</div>
			<div class = "cl-middle" id = "cl-middle">
				<ul class = "nav" id = "nav">
					<li class = "show">智能配件</li>
					<li>手机</li>
				</ul>
				<div class = "cont-one">
					 <svg width = "400px" height = "400" style = "position:absolute;left:-10px;top:-10px;">
						
						<path class = "first" d = "M100 150,A50 50,0 0 1 150 100," fill = "none" stroke = "blue" stroke-width = "20"></path>
						<path class = "first"d = "M150 100, A50 50 0 0 1 200 150," fill = "none" stroke = "red" stroke-width = "20"></path>
						<path class = "first"d = "M200 150, A50 50 0 0 1 150 200," fill = "none" stroke = "green" stroke-width = "20"></path>
						<path class = "first"d = "M150 200, A50 50 0 0 1 100 150," fill = "none" stroke = "pink" stroke-width = "20"></path>
						<text x = "150" y = "150" style = "text-anchor:middle;" >运动时长</text>
						<text x = "150" y = "170"  style = "text-anchor:middle;">0分钟</text>
						<path d = "M200 105A50 50 0 0 1 250 80" stroke = "red" stroke-width = "1" fill = "none"></path>
						<path d = "M212 172L252 175" stroke = "green" stroke-width = "1" fill = "none"></path>
						<path d = "M105 185L75 205" stroke = "pink" stroke-width = "2" fill = "none"></path>
					</svg> 
				</div>
				<div class = "cont-two">
					
				</div>
				<div class = "other">
					<div style = "margin-left:15px;">
						<img src="img/foot-icon.png" alt="foot">
						<p>步数</p>
						<p style = "margin-top:20px;"><span>0</span>步</p>
					</div>
					<div>
						<img src="img/hint-icon.png" alt="hint">
						<p>步数</p>
						<p style = "margin-top:20px;"><span>0</span>步</p>
					</div>
						
					<div>
						<img src="img/fire-icon.png" alt="fire">
						<p>步数</p>
						<p style = "margin-top:20px;"><span>0</span>步</p>
					</div>
				</div>
			</div>
			<div class = "cl-bottom">
				<div class ="cl-allday allday-show">
					<div class = "cl-navone">
						<ul>
							<li class = "navone-show">当天</li>
							<li>七天</li>
							<li>30天</li>
						</ul>
					</div>
					<div class = "cl-cont">
						<div class = "cl-cont1">
						<p>亲，今天你还没有运动曲线嘛！</p>
						</div>
					</div>
					<div class = "cl-cont">
						<div class = "cl-cont1">
						<p>亲，今天你还没有运动曲线嘛！</p>
						</div>
					</div>
					<div class = "cl-cont">
						<div class = "cl-cont1">
						<p>亲，今天你还没有运动曲线嘛！</p>
						</div>
					</div>
				</div>
				<div class ="cl-allday allday-show">
					<div class = "cl-navone">
						<ul>
							<li class = "navone-show">当天</li>
							<li>七天</li>
							<li>30天</li>
						</ul>
					</div>
					<div class = "cl-cont">
						<div class = "cl-cont1">
						<p>亲，今天你还没有运动曲线嘛！</p>
						</div>
					</div>
					<div class = "cl-cont">
						<div class = "cl-cont1">
						<p>亲，今天你还没有运动曲线嘛！</p>
						</div>
					</div>
					<div class = "cl-cont">
						<div class = "cl-cont1">
						<p>亲，今天你还没有运动曲线嘛！</p>
						</div>
					</div>
				</div>
				<div class ="cl-allday allday-show">
					<div class = "cl-navone">
						<ul>
							<li class = "navone-show">当天</li>
							<li>七天</li>
							<li>30天</li>
						</ul>
					</div>
					<div class = "cl-cont">
						<div class = "cl-cont1">
						<p>亲，今天你还没有运动曲线嘛！</p>
						</div>
					</div>
					<div class = "cl-cont">
						<div class = "cl-cont1">
						<p>亲，今天你还没有运动曲线嘛！</p>
						</div>
					</div>
					<div class = "cl-cont">
						<div class = "cl-cont1">
						<p>亲，今天你还没有运动曲线嘛！</p>
						</div>
					</div>
				</div>
				<div class ="cl-allday allday-show">
					<div class = "cl-navone">
						<ul>
							<li class = "navone-show">当天</li>
							<li>七天</li>
							<li>30天</li>
						</ul>
					</div>
					<div class = "cl-cont">
						<div class = "cl-cont1">
						<p>亲，今天你还没有运动曲线嘛！</p>
						</div>
					</div>
					<div class = "cl-cont">
						<div class = "cl-cont1">
						<p>亲，今天你还没有运动曲线嘛！</p>
						</div>
					</div>
					<div class = "cl-cont">
						<div class = "cl-cont1">
						<p>亲，今天你还没有运动曲线嘛！</p>
						</div>
					</div>
				</div>
				<div class = "cl-navtwo">
					<ul>
						<li class = "navtwo-show">运动量</li>
						<li>体重</li>
						<li>血压</li>
						<li>血糖</li>
					</ul>
				</div>
			</div>
		</div>
		<div id = "cont-right">
			<div class = "r-first">
				<h3><span></span>运动达人榜</h3>
				<ul class = "day">
					<li class = "show">昨天</li>
					<li>今天</li>
					<li>7天</li>
					<li>所有</li>
				</ul>
				<div class = "day-cont clearfix">
					<div style = "float:left;">
						<span class = "rade">1</span>
						<img src="img/default.png" alt="people">
					</div>
					<div class = "day-cont-right">
						<span class = "name">任命</span>
						<span class = "kilo">155.17公里</span>
						<p class = "jindu">
							<span class = "jindu1"></span>
						</p>
					</div>
				</div>
			</div>
			<div class = "r-second">
				<h3>本周成绩</h3>;
				<div class = "rs-pic"></div>
				<div class = "love clearfix">
					<p class = "pub">长辈关爱</p>
					<p class = "rever"></p>
					<p class = "pub">4次/周</p>
				</div>
			</div>
			<div class = "r-third">
				<h3>健康小贴士</h3>
				<div class = "clone">
					<a href="#">单位喊你去春游，这个福利真的可以有！</a>
					<p>根据2014年7月全总印发的《加强基层工会经费收支管理的通知》，在被允许使用工会经费支出的文体活动中，明确包括“开展春游活动”。</p>
				</div>
			</div>
		</div>
	</div>
	<div id = "footer">
		<a href="#" style = "margin-right:30px;">关于我们</a>
		<a href="#">联系我们</a>
		<p>Copyright © 2015 爱健康管理平台</p>
	</div>
	<script>
	$(function() {
		/*$(".user").bind("click",function() {
			$(".user-menu").slideToggle("slow");
		});*/
		$(".user-cont").bind("click",function() {
			if($("#user-hide").val() == 0){
				$(".user-menu").slideDown("slow");
				$("#user-hide").val(1);
			}else{
				$(".user-menu").slideUp("slow");
				$("#user-hide").val(0);
			}
		})

		$('.cl-allday').eq(0).show();
		$('.cl-navtwo li').eq(0).addClass('navtwo-show');

		$('.cl-navtwo li').click(function () {
			$('.cl-allday').hide();
			$('.cl-navtwo li').removeClass('navtwo-show');
			$('.cl-navtwo li').eq($(this).index()).addClass('navtwo-show');
			$('.cl-allday').eq($(this).index()).show();
		});
        
        $('.cl-cont').eq(0).show();
        $('.cl-navone li').eq(0).addClass('navone-show');

        $('.cl-navone li').click(function () {
        	$('.cl-cont').hide();
        	$('.cl-navone li').removeClass('navone-show');
        	$('.cl-cont').eq($(this).index()).show();
        	$('.cl-navone li').eq($(this).index()).addClass('navone-show');
        })
	})
	</script>
</body>
</html>